<template>
  <main-content title="操作日志">
    <template #search-bar>
      <search-bar>
        <template #normal>
          <!--          <el-form-item label="操作账号">-->
          <!--            <el-input v-model="searchForm.account" placeholder="操作账号"></el-input>-->
          <!--          </el-form-item>-->
          <el-form-item label="关联信息">
            <el-input v-model="searchForm.contactItem" placeholder="关联信息"></el-input>
          </el-form-item>
          <!--          <ins-cascader-filter @change="(insId) => searchForm.queryInsIds = insId"></ins-cascader-filter>-->
          <el-form-item label="操作时间">
            <el-date-picker v-model="timeRangeModel" type="datetimerange" start-placeholder="起始时间"
              end-placeholder="结束时间" />
          </el-form-item>
        </template>
        <template #toolbar>
          <el-form-item>
            <el-button type="primary" @click="getStaffPageList">查询</el-button>

            <!-- TODO 加权限 -->
            <el-button type="primary" @click="showExportData = true">导出</el-button>
          </el-form-item>
        </template>
      </search-bar>
    </template>
    <layout-table url="/merchant/merchantLog/pageList" ref="tableRefs" :param="searchForm">
      <el-table-column label="操作账号" prop="account" min-width="180"></el-table-column>
      <el-table-column label="操作描述" prop="description" min-width="300"></el-table-column>
      <el-table-column label="关联信息" prop="contactItem" min-width="300"></el-table-column>
      <el-table-column label="操作结果" prop="result" width="100">
        <template #default="scope">
          {{ getResult(scope.row.result) }}
        </template>
      </el-table-column>
      <el-table-column label="操作标记" prop="typeRemark" width="120"></el-table-column>
      <el-table-column label="操作者IP" prop="ip" width="120"></el-table-column>
      <el-table-column label="商户ID" prop="merchantId" width="120"></el-table-column>
      <el-table-column label="操作时间" width="180">
        <template #default="scope">
          {{ formatTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="100" v-has="['10300101']">
        <template #default="scope">
          <el-button link type="primary" @click="showDetail(scope.row)" v-has="['10300101']">查看详情</el-button>
        </template>
      </el-table-column>
    </layout-table>

    <log-detail v-model:show="isShowDetail" :row-data="operatingRow"></log-detail>
    <exportData v-model:show-dialog="showExportData" :search-data="{ ...{ logType: 'merchant' }, ...searchForm }"
      :time-key="timeRangeModel" :time-field="['startTime', 'endTime']" title="操作日志" export-type="operationLogExport">
    </exportData>
  </main-content>
</template>
<script lang="ts">
export default {
  name: 'MerchantLog'
}
</script>
<script lang="ts" setup>
import moment from "moment";
import LogDetail from "@/views/log/components/LogDetail.vue";
import SearchBar from "@/components/SearchBar.vue";
import exportData from "@/components/exportData/exportData.vue";
const tableRefs = ref()
const showExportData = ref(false)
const searchForm = reactive({
  account: '',
  startTime: '',
  endTime: '',
  contactItem: '',
  queryInsIds: [],
})

const timeRangeModel = ref()
watch(timeRangeModel, (newValue) => {
  if (newValue) {
    searchForm.startTime = '' + +new Date(newValue[0])
    searchForm.endTime = '' + +new Date(newValue[1])
  } else {
    searchForm.startTime = ''
    searchForm.endTime = ''
  }
})

const formatTime = (val: number) => {
  return val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : ''
}

const getResult = (value: string) => {
  try {
    return JSON.parse(value)?.code === 200 ? '成功' : '失败'
  } catch (e) {
    return value
  }
}

const isShowDetail = ref(false)
const operatingRow = ref()
const showDetail = (rowData: any) => {
  isShowDetail.value = true
  operatingRow.value = rowData
}

const store = useStore();
// 监听机构
const insId = computed(() => {
  return store.state.insId.insId;
});
watch(
  () => insId,
  () => {
    tableRefs.value.search()
  },
  {
    deep: true
  }
)

const getPageList = () => {
  tableRefs.value.search()
}
</script>

<style scoped lang="scss"></style>
